import React from 'react'
import {
    StyleSheet,
    Platform,
    View,
    Text,
    Image,
    TouchableOpacity,
    Alert,
    Modal,
    Dimensions,
} from 'react-native'
import pxToDp from '../config/pxToDp'

const { width, height } = Dimensions.get('window');


let mwidth = pxToDp(240);
let mheight = pxToDp(250);
// const marginTop = mTop;

export default class MorePopWidows extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            isVisible: this.props.show,
        }
        mwidth = this.props.width;
        mheight = this.props.height;
    }

    componentWillReceiveProps(nextProps) {
        this.setState({ isVisible: nextProps.show });
    }

    closeModal() {
        this.setState({
            isVisible: false
        });
        this.props.closeModal(false);
    }

    scan() {
        this.props.navigator.push({
            component: QRScanPage,
        })
    }

    render() {
        return (
            <View style={styles.container}>
                <Modal
                    transparent={true}
                    visible={this.state.isVisible}
                    animationType={'fade'}
                    onRequestClose={() => this.closeModal()}>
                    <TouchableOpacity style={styles.container} activeOpacity={1} onPress={() => this.closeModal()}>

                        <View style={styles.modal}>
                            <TouchableOpacity activeOpacity={1} onPress={this.props.groupChat} style={styles.itemView}>
                                <Image style={styles.imgStyle} source={require('../imgs/group.png')} />
                                <Text style={styles.textStyle}>发起群聊</Text>
                            </TouchableOpacity>
                            <View style={styles.line}></View>
                            <TouchableOpacity activeOpacity={1} onPress={this.props.addFrienf} style={styles.itemView}>
                                <Image style={styles.imgStyle} source={require('../imgs/adduser.png')} />
                                <Text style={styles.textStyle}>添加好友</Text>
                            </TouchableOpacity>
                            <View style={styles.line}></View>
                            <TouchableOpacity activeOpacity={1} onPress={this.props.QRCode} style={styles.itemView}>
                                <Image style={styles.imgStyle} source={require('../imgs/ic_scan_code_white.png')} />
                                <Text style={styles.textStyle}>扫一扫</Text>
                            </TouchableOpacity>
                            <View style={styles.line}></View>
                            <TouchableOpacity activeOpacity={1} onPress={this.props.payOff} style={styles.itemView}>
                                <Image style={styles.imgStyle} source={require('../imgs/ic_code_white.png')} />
                                <Text style={styles.textStyle}>付款码</Text>
                            </TouchableOpacity>
                            <View style={styles.line}></View>
                            {/* <TouchableOpacity activeOpacity={1} onPress={() => Alert.alert('点击了付款码')} style={styles.itemView}>
                                <Image style={styles.imgStyle} source={require('../imgs/ic_code_white.png')} />
                                <Text style={styles.textStyle}>付款码</Text>
                            </TouchableOpacity> */}
                        </View>
                    </TouchableOpacity>
                </Modal>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        width: width,
        height: height,
        
        //以下是阴影属性：  
        // shadowOffset: { width: 0, height: 5 },
        // shadowOpacity: 0.5,
        // shadowRadius: 5,
        // shadowColor: "#333",
        //注意：这一句是可以让安卓拥有灰色阴影  
        //elevation: 4, 
    },
    modal: {
        // backgroundColor: '#696969',
        backgroundColor: '#fff',
        width: mwidth,
        height: mheight,
        position: 'absolute',
        right: 10,
        top: 56,
        borderWidth: 0.3,
        borderColor: 'rgba(10,10,10,0.2)',
        // padding: 5,
        // justifyContent: 'center',
        // alignItems: 'flex-start',
        // borderRadius: 3,
    },
    itemView: {
        flexDirection: 'row',
        // justifyContent: 'center',
        alignItems: 'center',
        marginLeft:10,
        flex: 1,
    },
    textStyle: {
        // color: '#333',
        color: '#10B1F6',
        fontSize: 14,
        marginLeft: 2,
    },
    imgStyle: {
        width: 20,
        height: 20,
    },
    line:{
        width: mwidth,
        height: 1,
        borderWidth :0.5,
        borderColor:'#e9e9e9',
        // borderColor:'#10B1F6',
    }
});